<template>
	<div class="fullbox">
		<!-- 头部 -->
		<div class="navBox">
			<div class="leftNav">
				<img src="../assets/images/01..gif" alt />
				<span>KSLDI第一个钱包</span>
				<!-- <img class="imgTwo" src="../assets/images/0-1资产_09.gif" alt /> -->
				<i class=" iconfont icon-jiantou"></i>
			</div>
			<div class="rightNav">
				<!-- <img src="../assets/images/0-1资产_03.gif" alt /> -->
				<i class="iconfont icon-jiahao"></i>
			</div>
		</div>
		<!--  -->
		<div class="cardBox">
			<div>
				<div class="assets">
					<span>Total assets</span>
					<span class="iconfont icon-yanjing"></span>
				</div>
				<div class="more">
					<i class="iconfont icon-more"></i>
				</div>
			</div>
			<p class="buck">￥ 54835.400</p>
			<p class="oxdk">OXDKISSKDIE...SKSLAKFJLAK</p>
		</div>
		<!--  -->
		<div class="grid">
			<div>
				<img src="../assets/images/0-1资产_22.gif" alt />
				<span>扫一扫</span>
			</div>
			<div>
				<img src="../assets/images/0-1资产_25.gif" alt />
				<span>转入</span>
			</div>
			<div>
				<img src="../assets/images/0-1资产_27.gif" alt />
				<span>转出</span>
			</div>
			<div>
				<img src="../assets/images/0-1资产_19.gif" alt />
				<span>创建钱包</span>
			</div>
		</div>
		<!-- 内容 -->
		<div class="token">
			<div class="ken">
				<span>ToKen</span>
			</div>
			<div class="eth">
				<div class="etnLeft">
					<img src="../assets/images/0-1资产_39.gif" alt />
					<span>ETH</span>
				</div>
				<div class="etnRight">
					<p>565656565.00</p>
					<p>≈￥5486.00</p>
				</div>
			</div>
			<div class="eth">
				<div class="etnLeft">
					<img src="../assets/images/0-1资产_41.gif" alt />
					<span>BTC</span>
				</div>
				<div class="etnRight">
					<p>565656565.00</p>
					<p>≈￥ 5486.00</p>
				</div>
			</div>
			<div class="eth">
				<div class="etnLeft">
					<img src="../assets/images/0-1资产_39.gif" alt />
					<span>ETH</span>
				</div>
				<div class="etnRight">
					<p>565656565.00</p>
					<p>≈￥ 5486.00</p>
				</div>
			</div>
			<div class="eth">
				<div class="etnLeft">
					<img src="../assets/images/0-1资产_41.gif" alt />
					<span>BTC</span>
				</div>
				<div class="etnRight">
					<p>565656565.00</p>
					<p>≈￥ 5486.00</p>
				</div>
			</div>
		</div>
		<!--  -->
		<!-- <van-action-sheet v-model="show" :actions="actions" @select="onSelect" /> -->
		<van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
			<div class="popup">
				<h4>安全提醒</h4>
				<p>你的身份助记词未备份,请务必备份助记词</p>
				<p>助记词可用于恢复身份下的钱包资产,防止忘记密码</p>
				<p>应用删除、手机丢失等情况导致资产损失</p>
				<div class="btn">
					<van-button plain type="primary">稍后提醒</van-button>
					<van-button type="info">安全备份</van-button>
				</div>
			</div>
		</van-popup>
		<!-- 转账备份的安全提醒 -->
		<van-popup class="backups" v-model="show1">
			<div>安全提醒</div>
			<p>备份助记词,解锁查看收款地址功能</p>
			<p>你的身份助记词未备份,请务必备份助记词</p>
			<p>助记词可用于恢复身份下钱包资产,防止忘记密码,应用删除、手机丢失等情况导致资产损失</p>
			<van-button type="info">立即备份</van-button>
			<van-button plain type="primary">取消</van-button>
		</van-popup>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				show1: true,
				actions: [{
						name: "选项"
					},
					{
						name: "选项"
					},
					{
						name: "选项",
						subname: "描述信息"
					}
				]
			};
		}
	};
</script>

<style scoped>
	.fullbox {
		/* height: 100px; */
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.navBox {
		display: flex;
		justify-content: space-between;
		margin-bottom: 0.9375rem;
	}
	
	.leftNav {
		height: 1.875rem;
		width: 11.25rem;
		/* background: blue; */
		border-radius: 0.9375rem;
		border: 1px solid #f0efef;
		line-height: 1.875rem;
		display: flex;
		align-items: center;
	}
	
	.leftNav img {
		display: inline-block;
		width: 1.5625rem;
		height: 1.5rem;
		margin-left: 0.3125rem;
	}
	
	.leftNav .imgTwo {
		display: inline-block;
		width: 0.9375rem;
		height: 0.9375rem;
	}
	
	.leftNav span {
		height: 1.875rem;
		font-size: 0.75rem;
		margin-right: 0.625rem;
	}
	
	.rightNav .iconfont {
		font-size: 1.5625rem;
	}
	
	.cardBox {
		height: 12.5rem;
		width: 100%;
		/* background-color: blue; */
		background: url('../assets/images/微信图片_20191017093543.png') no-repeat;
		border-radius: 0.625rem;
		position: relative;
	}
	
	.assets {
		font-size: 1.25rem;
		padding-top: 1.25rem;
		padding-left: 1.5625rem;
		color: azure;
		position: absolute;
	}
	
	.icon-yanjing {
		font-size: 1.25rem;
	}
	
	.icon-more {
		color: azure;
		font-size: 1.25rem;
		position: absolute;
		right: 1.875rem;
		top: 1.25rem;
	}
	
	.buck {
		font-size: 40px;
		position: absolute;
		top: 3.125rem;
		left: 1.25rem;
		color: azure;
	}
	
	.oxdk {
		position: absolute;
		top: 7.5rem;
		left: 1.25rem;
		color: azure;
	}
	
	.grid {
		height: 7.5rem;
		/* background: pink; */
		display: flex;
	}
	
	.grid div img {
		display: inline-block;
		width: 1.5625rem;
		height: 1.5625rem;
	}
	
	.grid div span {
		font-size: 0.75rem;
	}
	
	.grid div {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	
	.token {
		height: 400px;
		/* background: pink; */
	}
	
	.ken span {
		display: inline-block;
		margin-top: 1.25rem;
		margin-left: 1.25rem;
	}
	
	.eth {
		height: 5.3125rem;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f0efef;
	}
	
	.eth .etnLeft {
		display: flex;
		align-items: center;
		margin-left: 1.25rem;
	}
	
	.eth .etnLeft img {
		display: inline-block;
		width: 2.5rem;
		height: 2.5rem;
		border-radius: 1.25rem;
		margin-right: 0.625rem;
	}
	
	.eth .etnRight {
		margin-right: 0.9375rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	
	.popup {
		margin: 0 auto;
		width: 21.875rem;
	}
	
	.popup h4 {
		display: flex;
		justify-content: center;
		margin-bottom: .625rem;
		margin-top: .625rem;
	}
	
	.popup p {
		font-size: .875rem;
		margin-bottom: .3125rem;
	}
	
	.btn {
		display: flex;
		justify-content: space-between;
	}
</style>

<style lang="less">
	.van-popup {
		height: 12.5rem !important;
	}
	
	.van-button {
		margin-top: .9375rem;
		border-radius: 10px;
		width: 9.375rem;
	}
	
	.van-popup--center {
		width: 20.3125rem;
		height: 18.75rem !important;
		border-radius: 1.5625rem;
		div {
			font-size: 1.25rem;
			font-weight: 700;
			display: flex;
			justify-content: center;
			height: 4.6875rem;
			line-height: 4.6875rem;
		}
		p {
			font-size: .875rem;
			padding: 0 1.875rem;
			margin-bottom: .625rem;
			color: #666666;
		}
		.van-button {
			display: block;
			width: 17.8125rem;
			margin-left: 1.0625rem;
			margin-bottom: 5px;
		}
		.van-button--primary {
			border: 1px solid #fff;
		}
		.van-button--plain.van-button--primary {
			color: #a7a7a7;
		}
	}
</style>